import type { SpColumnsType } from '@/components/SpTable/type'
import { message, Tag } from 'ant-design-vue'
import type { SysDictionaryDataType } from './model'
import ModalForm from '../form/dictDataModal.vue'
import { addDictDataAPI, deleteDictDataAPI, getDictDataListAPI, updateDictDataAPI } from './api'
import { addDialog } from '@/components/SpDialog/index'
import type { FormExpose } from 'ant-design-vue/es/form/Form'

export function useDictData() {
  // 日志列
  const dictDataLogColumn: SpColumnsType[] = [
    {
      title: '字典名称',
      dataIndex: 'dictName',
      align: 'center'
    },
    {
      title: '字典值',
      dataIndex: 'dictValue',
      align: 'center'
    },
    {
      title: '是否默认',
      dataIndex: 'dictDataMessage',
      align: 'center',
      cellRenderer: (record: SysDictionaryDataType) => {
        if (record.dictDefault === 1) {
          return <Tag color="blue">是</Tag>
        } else {
          return <Tag color="cyan">否</Tag>
        }
      }
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center',
      ellipsis: true
    },
    {
      title: '状态',
      dataIndex: 'status',
      cellRenderer: (record: SysDictionaryDataType) => {
        if (record.status === 1) {
          return <Tag color="green">正常</Tag>
        } else {
          return <Tag color="red">禁用</Tag>
        }
      },
      align: 'center'
    },
    {
      title: '排序值',
      dataIndex: 'dictSort',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center'
    }
  ]

  // 字典内容弹窗
  const open = ref<boolean>(false)
  // 字典数据类型
  const dictDataType = ref('')
  // 表格数据
  const dictDataLogList = ref<SysDictionaryDataType[]>([])
  // 表格加载
  const dictDataLogLoading = ref<boolean>(false)
  // 弹窗
  const modalRef = ref()

  // 获取字典内容列表
  function getDictDataList() {
    dictDataLogLoading.value = true
    getDictDataListAPI(dictDataType.value)
      .then((res) => {
        dictDataLogList.value = res.data
      })
      .finally(() => {
        dictDataLogLoading.value = false
      })
  }

  // 打开弹窗
  function openDictDataModal(title: string, data?: SysDictionaryDataType) {
    addDialog({
      title: `${title}字典属性`,
      width: '35%',
      contentRenderer: () =>
        h(ModalForm, {
          ref: modalRef,
          data
        }),
      beforeSure: function (done) {
        // 关闭弹窗
        function chores(title: string, name: string, done: Function) {
          message.success(`您${title}了字典属性名称为${name}的这条数据`)
          done()
          getDictDataList()
        }
        const form = modalRef.value.getRef() as FormExpose
        form.validate().then((res) => {
          const formData = res as SysDictionaryDataType
          formData['dictType'] = dictDataType.value
          if (title == '编辑') {
            updateDictDataAPI(data?.id as number, formData).then(() => {
              chores(title, formData.dictName, done)
            })
          } else {
            addDictDataAPI(formData).then(() => {
              chores(title, formData.dictName, done)
            })
          }
        })
      }
    })
  }

  // 弹窗变化
  const afterOpenChange = (bool: boolean) => {
    !bool && clearData()
  }

  // 删除字典数据
  function dictDataDelete(id: number) {
    deleteDictDataAPI(id).then(() => {
      message.success('删除成功')
      getDictDataList()
    })
  }

  // 清空数据
  function clearData() {
    dictDataLogList.value = []
    dictDataType.value = ''
    dictDataLogLoading.value = false
  }

  // 显示日志
  const showDrawer = (type: string) => {
    dictDataType.value = type
    getDictDataList()
    open.value = true
  }
  return {
    open,
    dictDataLogList,
    dictDataLogLoading,
    dictDataLogColumn,
    afterOpenChange,
    openDictDataModal,
    dictDataDelete,
    showDrawer
  }
}
